<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>grid.htm</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
	<script>
	Ext.onReady(function(){

    Ext.QuickTips.init();

    var columns = [
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',
        	editor: new Ext.form.TextField({
               allowBlank: false
           })},
        {header:'名称',dataIndex:'name',
        	editor: new Ext.form.TextField({
               allowBlank: false
           })},
        {header:'描述',dataIndex:'descn',
        	editor: new Ext.form.TextField({
               allowBlank: false
           })}
    ];

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var reader = new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ]);

    var store = new Ext.data.GroupingStore({
        reader: reader,
        data: data,
        groupField: 'sex',
        sortInfo: {field: 'id', direction: "ASC"}
    });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        columns: columns,
        view: new Ext.grid.GroupingView(),
        renderTo: 'grid-example'
    });

});
	</script>
  </head>
  
  <body>
  	<div id="temp" style="width:100%;height:100%">
  		<div id="grid-example"></div>
  	</div>
    

  </body>
</html>
